<template>
  <div id="cinema">
    <header>
      <router-link to="/cinemaList">
        <i class="iconfont icon-jiantou-copy"></i>
      </router-link>
      <p>影院详情</p>
    </header>
    <div class="cinemaCentent">
      <div class="buy_step">
        <ul>
          <li class="actived">1.选择场次</li>
          <li>2.在线选座</li>
          <li>3.支付</li>
          <li>4.取票</li>
        </ul>
      </div>
      <div class="cinema_info">
        <p>{{CD.addr}}</p>
        <p>
          <span v-for="item in CD.tel">{{item}}</span>
        </p>
      </div>
      <div class="movieList">
        <ul>
          <li v-for="movie in data.movies" :name="movie.id" @click="selectMovie($event)">
            <img :src="movie.img">
          </li>
        </ul>
      </div>
      <div class="movie_info">
        <h4>
          {{movieInfo.nm}}
          <span>{{movieInfo.ver}}</span>
          <span>{{movieInfo.sc}}分</span>
        </h4>
        <div class="movie_date_warp">
          <ul class="movie_date">
            <li v-for="item in movieData.Dates" @click="selectDate($event)">
              {{item.text}}
            </li>
          </ul>
        </div>
        <ul class="movie_time">
          <li v-for="(item,index) in movieDS">
            <div>
              <strong>{{item.tm}}</strong>
              <p>{{item.end}}结束</p>
            </div>
            <div>
              <p>{{item.lang}}{{item.tp}}</p>
              <p>{{item.th}}</p>
            </div>
            <div>
              <strong>33元</strong>
              <del>29元</del>
            </div>
            <div>
              <router-link :to="'/seats/' + cinemaId + '/movie/' + movieInfo.id + '/date/' + currentDate + '/dateIndex/' + index">
                选座购票
              </router-link>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import filmer from '../filmer'
import Vue from 'vue'
export default {
  data() {
    return {
      data: '',
      CD: '',//cinemaDetailModel影院详情
      movieInfo: '',
      movieData: '',//时间
      movieDS: '',
      currentDate: ''
    }
  },
  methods: {
    init: function() {
      var that = this;
      this.cinemaId = this.$route.params.id;
      var data = cinemas()
      if (data.status == 0) {
        that.data = data.data;
        that.CD = data.data.cinemaDetailModel;
        console.log(that.CD)
        //获取更新后的DOM，并给第一个元素添加一个点击后的效果
        Vue.nextTick(function() {
          $(".movieList img:first").click();
        })
      }
      console.log(data)
    },
    selectMovie: function(e) {
      var that = this;
      var el = $(e.target);
      var index = el.parent().index();
      this.cinemaId = this.$route.params.id;
      var movieId = el.parent().attr("name")
      console.log(movieId)
      // filmer.getCinemaInfo(this.cinemaId, function (data) {
      var data = cinemas()
      console.log(data)
      if (data.status == 0) {
        that.movieData = data.data;
        that.movieInfo = data.data.movies[index];
        console.log(that.movieInfo);
        el.parent().addClass("pictureSelected").siblings().removeClass("pictureSelected")
        //获取更新后的DOM，并给第一个元素添加一个点击后的效果
        Vue.nextTick(function() {
          $(".movie_date li:first").click();
        })
      }
      // })
    },
    selectDate: function(e) {
      var that = this;
      $(e.target).addClass("selected").siblings().removeClass("selected")
      var data = cinemas()
      that.currentDate = data.data.Dates[$(e.target).index()].slug;
      that.movieDS = data.data.DateShow[this.currentDate];

      console.log(that.currentDate)
    }
  },
  created: function() {
    this.init();
  }
}
function cinemas() {
  var data = '{"control":{"expires":120},"status":0,"data":{"Dates":[{"text":"今天 8月15日","slug":"2017-08-15"},{"text":"明天 8月16日","slug":"2017-08-16"}],"currentMovie":{"ver":"2D/3D/IMAX 2D/中国巨幕/全景声","nm":"战狼2","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/02ac72c0e8ee2987f7662ad921a2acc7999433.jpg","sc":9.7,"preferential":0,"id":344264},"cinemaDetailModel":{"deals":"","area":"雁塔区","bus":"","park":"","imax":0,"snum":42,"s":8.285714,"s1":8.285714,"s2":8.476191,"s3":8.238095,"featureTags":[{"desc":"一号激光厅，152个座位；二号激光厅，152个座位；三号激光厅，152个座位；四号厅，195个座位；五号激光厅，113个座位；六号激光厅，116个座位；七号激光厅，113个座位","type":19,"tag":"60帧厅"},{"desc":"二号激光厅，447个座位；巨幕厅","type":15,"tag":"杜比全景声厅"},{"desc":"1.3米以下儿童可免费观看电影（无座），每位成人仅限携带1名免票儿童。","type":7,"tag":"儿童优惠"}],"ct":"西安","nm":"奥斯卡金地国际影城(金地广场)","lat":34.20359,"lng":108.98846,"addr":"雁塔区曲江池东路金地广场4楼（飞象披萨对面）","price":0.0,"callboard":"","brd":"其它","dis":"","tel":["029-84561999","400-899-9527"],"suw":"","dri":"","note":"","dealtp":0,"preferential":0,"sellmin":0,"sell":true,"id":11533},"movies":[{"ver":"2D/3D/IMAX 2D/中国巨幕/全景声","nm":"战狼2","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/02ac72c0e8ee2987f7662ad921a2acc7999433.jpg","sc":9.7,"preferential":0,"id":344264},{"ver":"2D","nm":"心理罪","isShowing":true,"img":"http://p1.meituan.net/165.220/movie/5861989b806570f3d7a82ee5695ddf1a512543.jpg","sc":8.2,"preferential":0,"id":342381},{"ver":"2D/IMAX 2D/中国巨幕","nm":"侠盗联盟","isShowing":true,"img":"http://p1.meituan.net/165.220/movie/26ca66778a40ef2bbcfd33877017a84e1033521.jpg","sc":8.1,"preferential":0,"id":1183619},{"ver":"2D","nm":"二十二","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/3a4f9d6e3c48326d4ae4fe3ed8c973e1584222.jpg","sc":9.5,"preferential":0,"id":615739},{"ver":"3D/IMAX 3D/中国巨幕","nm":"神偷奶爸3","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/e4aa7abb6ef5fbe695174063ac6cc0921246361.jpg","sc":8.8,"preferential":0,"id":249900},{"ver":"2D","nm":"地球：神奇的一天","isShowing":true,"img":"http://p1.meituan.net/165.220/movie/5568cc4d4fb01053ca856f8bf50720021284663.jpg","sc":9.1,"preferential":0,"id":344081},{"ver":"3D/IMAX 3D/中国巨幕/全景声","nm":"三生三世十里桃花","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/e5a715b3fcbd9e928dc96aefa6b19d58379838.jpg","sc":7.1,"preferential":0,"id":246896},{"ver":"3D/IMAX 3D/中国巨幕/全景声","nm":"星际特工：千星之城","isShowing":false,"img":"http://p0.meituan.net/165.220/movie/41ebecd825ffe37afd93687d480de1f1639738.png","sc":0.0,"preferential":0,"id":249008},{"ver":"2D","nm":"杀破狼·贪狼","isShowing":false,"img":"http://p0.meituan.net/165.220/movie/5097ccd2d26924642161e3b101943c31304962.jpg","sc":0.0,"preferential":0,"id":342176},{"ver":"2D/3D/IMAX 2D/中国巨幕","nm":"赛车总动员3：极速挑战","isShowing":false,"img":"http://p0.meituan.net/165.220/movie/2b73d01ae68a1972f7f3e235127c8bb9723265.jpg","sc":0.0,"preferential":0,"id":342067},{"ver":"2D/3D/IMAX 3D/中国巨幕","nm":"鲛珠传","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/a229a1429ea8209e19c2cc24d0cc8c4a994102.png","sc":7.8,"preferential":0,"id":245938}],"DateShow":{"2017-08-15":[{"end":"19:53","showId":172227,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"六号激光厅","sellPrStr":"78393","prStr":"31905","preferential":0,"tm":"17:50","sell":true},{"end":"20:43","showId":172228,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"29399","prStr":"98907","preferential":0,"tm":"18:40","sell":true},{"end":"21:23","showId":172229,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"02497.951","prStr":"614415020770","preferential":0,"tm":"19:20","sell":true},{"end":"22:13","showId":172230,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"六号激光厅","sellPrStr":"79399","prStr":"64908","preferential":0,"tm":"20:10","sell":true},{"end":"23:03","showId":172231,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"42396","prStr":"60900","preferential":0,"tm":"21:00","sell":true},{"end":"23:53","showId":172232,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"66497.928","prStr":"867315923070","preferential":0,"tm":"21:50","sell":true},{"end":"00:43","showId":172233,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"六号激光厅","sellPrStr":"72356","prStr":"65906","preferential":0,"tm":"22:40","sell":true}],"2017-08-16":[{"end":"12:33","showId":229375,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"四号厅","sellPrStr":"83354","prStr":"94903","preferential":0,"tm":"10:30","sell":true},{"end":"13:23","showId":229376,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"五号激光厅","sellPrStr":"70351","prStr":"87905","preferential":0,"tm":"11:20","sell":true},{"end":"14:13","showId":229377,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"一号激光厅","sellPrStr":"20353","prStr":"09908","preferential":0,"tm":"12:10","sell":true},{"end":"14:53","showId":229378,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"四号厅","sellPrStr":"32355","prStr":"02903","preferential":0,"tm":"12:50","sell":true},{"end":"15:33","showId":229379,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"08359","prStr":"58904","preferential":0,"tm":"13:30","sell":true},{"end":"16:13","showId":229380,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"51395","prStr":"15905","preferential":0,"tm":"14:10","sell":true},{"end":"17:03","showId":229381,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"71494.975","prStr":"135115389370","preferential":0,"tm":"15:00","sell":true},{"end":"17:53","showId":229382,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"79398","prStr":"01906","preferential":0,"tm":"15:50","sell":true},{"end":"18:33","showId":229383,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"96398","prStr":"78901","preferential":0,"tm":"16:30","sell":true},{"end":"19:23","showId":229384,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"42492.937","prStr":"169915943830","preferential":0,"tm":"17:20","sell":true},{"end":"20:13","showId":229385,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"41394","prStr":"70902","preferential":0,"tm":"18:10","sell":true},{"end":"21:03","showId":229386,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"21397","prStr":"23906","preferential":0,"tm":"19:00","sell":true},{"end":"21:43","showId":229387,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"37493.956","prStr":"054215041220","preferential":0,"tm":"19:40","sell":true},{"end":"22:33","showId":229388,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"98393","prStr":"48901","preferential":0,"tm":"20:30","sell":true},{"end":"23:23","showId":229389,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"97394","prStr":"96909","preferential":0,"tm":"21:20","sell":true},{"end":"00:03","showId":229390,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"28490.999","prStr":"751415220670","preferential":0,"tm":"22:00","sell":true},{"end":"00:53","showId":229391,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"20358","prStr":"79906","preferential":0,"tm":"22:50","sell":true}]},"cssLink":"//p0.meituan.net/movie/9ca4e6e45293ba96292f00ed964a24a22696.css"}}'

  data = JSON.parse(data)

  return data;
}
</script>
<style scoped>
/* 头部 */

#cinema>header {
  width: 100%;
  background-color: #e54847;
}

#cinema>header>a>i {
  position: absolute;
  top: 2.5rem;
  font-size: 2rem;
  color: #fff;
  transform: rotate(180deg);
  margin-right: 88%;
}

#cinema>header>p {
  color: #fff;
}


/* 导航 */

#cinema .cinemaCentent .buy_step>ul {
  display: flex;
  justify-content: space-around;
  font-size: 1rem;
}

#cinema .cinemaCentent .buy_step>ul>li {
  display: inline-block;
  flex-grow: 1;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  background-color: #ddd;
}

#cinema .cinemaCentent .buy_step>ul>.actived {
  background-color: #F79400;
  color: #fff !important;
  border: 1px solid #F79400;
}


/* 地址和电话 */

#cinema .cinemaCentent .cinema_info {
  padding: 1rem;
  background-color: #fff;
  font-size: .9rem;
  font-size: 1rem;
}

#cinema .cinemaCentent .cinema_info p:first-child {
  margin-bottom: 0;
}

#cinema .cinemaCentent .cinema_info p:last-child {
  padding-top: .2rem;
  color: tomato;
  margin-bottom: 0;
}


/* 图片列表 */

#cinema .cinemaCentent .movieList {
  overflow-x: auto;
  background-color: #5b5b5b;
  padding: 1rem 0;
}

#cinema .cinemaCentent .movieList ul {
  width: 89.2rem;
  padding: 0;
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

#cinema .cinemaCentent .movieList ul li {
  width: 7.2rem;
  height: 10rem;
  margin-left: 0.8rem;
  display: inline-block;
}

.movieList .pictureSelected {
  border: 1px solid #fff;
  width: 7.6rem !important;
  height: 11rem !important;
}

#cinema .cinemaCentent .movieList img {
  width: 100%;
  height: 100%;
  background-color: red;
}

#cinema .cinemaCentent .movie_info {
  background-color: #fff
}

#cinema .cinemaCentent .movie_info h4 {
  font-size: 1.45rem;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1rem;
  border-bottom: 1px solid #aaa;
}

#cinema .cinemaCentent .movie_info span:first-child {
  padding: .2rem;
  color: #fff;
  background-color: #2895db;
  font-size: 1rem;
  vertical-align: top;
}

#cinema .cinemaCentent .movie_info span:last-child {
  color: #F07C0A;
  font-size: 1.2rem;
}

#cinema .movie_date_warp .movie_date {
  width: 100%;
  justify-content: space-around;
  padding: 0 1rem 1rem 1rem;
  border-bottom: 1px solid #aaa;
}

#cinema .movie_date_warp .movie_date li {
  display: inline-block;
  flex-grow: 1;
  text-align: center;
  padding: .3rem 1rem;
}

.movie_date .selected {
  border-radius: 1rem;
  background-color: red;
  margin: 0 1rem;
  color: #fff;
}


/* 选座购票 */

#cinema .movie_info .movie_time {
  width: 100%;
  position: absolute;
  justify-content: space-around;
  background-color: #fff;
}

#cinema .movie_info .movie_time div {
  display: inline-block;
  text-align: center;
}

#cinema .movie_info .movie_time div p {
  margin-bottom: 0px;
}

#cinema .movie_info .movie_time li {
  flex-grow: 1;
  border-bottom: 1px solid #d1d1d1;
  padding: 1rem 0;
}

#cinema .movie_info .movie_time li div:first-child {
  float: left;
  width: 24%;
}

#cinema .movie_info .movie_time li div:first-child strong {
  color: #df2d2d;
  font-size: 2rem;
  display: block;
  width: 100%;
  border-right: 1px solid #aaa;
}

#cinema .movie_info .movie_time li div:first-child p {
  color: #aaa;
  font-size: 1.3rem;
  width: 100%;
  border-right: 1px solid #aaa;
}

#cinema .movie_info .movie_time li div:nth-last-child(3) {
  float: left;
  width: 24%;
  font-size: .9rem;
  margin: .6rem 0;
}

#cinema .movie_info .movie_time li div:nth-last-child(3) p:last-child {
  position: relative;
  top: .5rem;
}

#cinema .movie_info .movie_time li div:nth-last-child(2) {
  width: 24%;
}

#cinema .movie_info .movie_time li div:nth-last-child(2) strong {
  display: block;
  color: #df2d2d;
  font-size: 2rem;
}

#cinema .movie_info .movie_time li div:nth-last-child(2) del {
  color: #aaa;
  font-size: 1.5rem;
}

#cinema .movie_info .movie_time li div:last-child {
  float: right;
  width: 24%;
}

#cinema .movie_info .movie_time li div:last-child a {
  color: #fff;
  background-color: #e64847;
  padding: .75rem;
  font-size: 1.2rem;
  border-radius: 4px;
  position: relative;
  top: 1rem;
}
</style>
